{% extends "projects/project_edit_base.html" %}

{% load i18n %}
{% load static %}

{% block title %}{% trans "Traffic Analytics" %}{% endblock %}

{% block nav-dashboard %} class="active"{% endblock %}

{% block project-traffic-analytics-active %}active{% endblock %}
{% block project_edit_content_header %}{% trans "Traffic Analytics" %}{% endblock %}

{% block project_edit_content %}

  {% if not enabled %}
    {% block disabled %}
      {% include 'projects/includes/feature_disabled.html' %}
    {% endblock %}
  {% endif %}

  <h3>{% trans "Top viewed pages of the past month" %}</h3>

    <div class="module-list">
      <div class="module-list-wrapper">
        <ul class="long-list-overflow">
          {% for page, count in top_viewed_pages %}
            <li class="module-item">
              {{ page }}
              <span class="right quiet">{{ count }}</span>
            </li>
          {% empty %}
            <li class="module-item">
              <p class="quiet">
                {% trans 'No data available.' %}
              </p>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

  <br/>

  <h2>{% trans "Overview of the past month" %}</h2>
  <canvas id="page-views-per-page" width="400" height="150"></canvas>

{% endblock %}

{% block extra_scripts %}
  <!-- Chart.js v2.8.0 -->
  <script src="{% static 'vendor/chartjs/chartjs.bundle.min.js' %}"></script>
{% endblock %}

{% block extra_links %}
  <!-- Chart.js v2.8.0 -->
  <link rel="stylesheet" href="{% static 'vendor/chartjs/chartjs.min.css' %}">
{% endblock %}

{% block footerjs %}
  var line_chart = document.getElementById("page-views-per-page").getContext("2d");

  {# Using |safe here is ok since this is just integers and formatted dates #}
  var line_chart_labels = {{ page_data.labels|safe }};
  var line_chart_data = {{ page_data.int_data|safe }};

  var line_chart = new Chart(line_chart, {
    type: "line",
    data: {
      labels: line_chart_labels,
      datasets: [{
        label: "# of views",
        data: line_chart_data,
        fill: false,
        borderColor: "rgba(75, 192, 192, 1)",
        pointBorderColor: "rgba(75, 192, 192, 1)",
      }]
    },
  });
{% endblock %}
